<template>
  <div id="app">
    <Header></Header>
    <Nav></Nav>

    <div class="content1">
      <el-tabs :tab-position="tabPosition" style="height: 400px;">
        <!-- 招聘中心 -->
        <el-tab-pane label="招聘中心">
          <div class="ipt">
            <el-select v-model="vae" filterable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button @click="select()" type="primary" icon="el-icon-search">搜索</el-button>
          </div>

          <div v-show="show == true" class="slider">
            <el-carousel height="350px" width="30px">
              <el-carousel-item v-for="item in 4" :key="item">
                <!-- <h3>{{ item }}</h3> -->
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="box" v-show="show == false">
            <div class="search" v-for="(sd, index) in searchDetail" :key="sd.id">
              <p class="garden">招聘单位：{{ sd.garden }}</p>
              <p>单位介绍：{{ sd.garden_troduction }}</p>
              <p>招聘工作：{{ sd.job }}</p>
              <p>工作简介：{{ sd.job_troduction }}</p>
              <p>薪资：{{ sd.salsry }}</p>
              <button class="btn" @click=joinWe(index)>加入我们</button>
            </div>
          </div>

        </el-tab-pane>
        <!-- 热门招聘 -->
        <el-tab-pane label="热门岗位">
          <table class="t1">
            <tr>
              <router-link to="/application_detail">
                <a href="###">
                  <td @click="hotJobDetail(index)" v-if="index < 24" v-for="(hj, index) in hotJob" :key="hj.id"><i
                      class="el-icon-star-on" style="color:red"></i>{{ hj.job }}
                  </td>
                </a>
              </router-link>
            </tr>
          </table>
        </el-tab-pane>
        <!-- 名园招聘 -->
        <el-tab-pane label="名园招聘">
          <table class="t2">
            <tr>
              <td v-if="index < 9" v-for="(ag, index) in garden" :key="ag.id"> <img v-if="index == 0"
                  src="../assets/application_garden1.png" style="width:141px;height:106px;float: left;">
                <img v-if="index == 1" src="../assets/application_garden2.jpg"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 2" src="../assets/application_garden3.jpg"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 3" src="../assets/application_garden4.webp"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 4" src="../assets/appliaction_garden5.webp"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 5" src="../assets/applicaton_garden6.jpg"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 6" src="../assets/application_garden7.jpg"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 7" src="../assets/application_garden8.webp"
                  style="width:141px;height:106px;float: left;">
                <img v-if="index == 8" src="../assets/application_garden9.jpg"
                  style="width:141px;height:106px;float: left;">{{ ag.garden }}
                <br>
                <router-link to="/application_garden">
                  <p @click="garden_select(index)"><a href="###" style="color:red">了解详情</a></p>
                </router-link>
              </td>
            </tr>
            <!-- </router-link> -->
          </table>
        </el-tab-pane>
        <!-- 招聘会 -->
      </el-tabs>
    </div>
    <Dialog :dialog="dialog" :ad="tojob" :tg="togarden"></Dialog>
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import eventBus from '../views/eventBus'
import Dialog from '../components/dialog.vue'
export default {


  name: 'application_center',
  components: {
    Header,
    Nav,
    Footer,
    Dialog
  },
  data() {
    return {
      dialog: {
        show: false
      },
      show: true,
      hotJob: [],
      garden: [],
      vae: [],
      searchDetail: [],
      tojob: [],
      togarden: [],
      tabPosition: 'left',
      // 搜索框数据
      options: [{
        value: '幼师',
      }, {
        value: '副园长',
      }, {
        value: '出纳',
      }, {
        value: '保育员',
      }, {
        value: '食堂人员',
      }, {
        value: '保育人员',
      }, {
        value: '采购员',
      }, {
        value: '班长',
      }, {
        value: '保管员',
      }
      ]
    };
  },
  mounted() {
    // console.log(this.options[0].value)
    // 热门岗位获取请求
    this.$axios.get('/api/application/hotJob')
      .then(res => {
        this.hotJob = res.data
      }),
      // 名园招聘获取请求
      this.$axios.get('/api/application/garden')
        .then(res => {
          this.garden = res.data
        })
  },
  methods: {
    // 热门岗位点击详情数据请求
    hotJobDetail(index) {
      this.$axios.get(`/api/application/hotJobDetail/${this.hotJob[index].job}`, {
      })
        .then(res => {
          // this.detectCollection = res.data
          // console.log(res.data)
          setTimeout(() => {
            eventBus.$emit('hotJob_detail', res.data)
          }, 100)
        })
    },
    // 名园招聘点击详情数据请求
    garden_select(index) {
      this.$axios.get(`/api/application/gardenDetail/${this.garden[index].garden}`, {
      })
        .then(res => {
          // this.detectCollection = res.data
          // console.log(res.data)
          setTimeout(() => {
            eventBus.$emit('garden_detail', res.data)
          }, 100)
        })
    },
    // 点击搜索数据请求
    select() {
      this.show = false
      this.$axios.get(`/api/application/searchDetail/${this.vae}`, {
      })
        .then(res => {
          // console.log(res.data)
          this.searchDetail = res.data
        })
      // console.log(this.vae)
    },
    //点击加入我们按钮
    joinWe(index) {
      // alert('ok')
      this.dialog.show = true
      this.tojob = this.searchDetail[index].job
      this.togarden = this.searchDetail[index].garden
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: black;
}

.content1 {
  margin-left: 200px;
}

.ipt {
  margin-left: 300px;
  margin-top: 10px;
}

/* 轮播图 */
.el-carousel__item:nth-child(2n) {
  background-image: url(../assets/applicationCenter_lbt1.webp);
  background-repeat: no-repeat;
  background-size: 800px 350px;
}

.el-carousel__item:nth-child(2n+1) {
  background-image: url(../assets/applicationCenter_lbt2.webp);
  background-repeat: no-repeat;
  background-size: 800px 350px;
}

.slider {
  margin-top: 4px;
  margin-bottom: 5px;
  width: 800px;
}

/* 热门招聘 */
.t1 {
  margin-top: 40px;
  margin-left: 50px;
}

.t1 td {
  float: left;
  margin-left: 10px;
  margin-top: 5px;
  display: block;
  width: 123px;
  height: 66px;
  line-height: 66px;
  text-align: center;
  border-radius: 43px 43px;
  background-color: rgb(176, 206, 231);
}

.t2 td {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  display: block;
  width: 288px;
  height: 108px;
  border: 1px solid black;
  background-color: gray;
}

.search {
  margin-top: 50px;
  margin-left: 110px;
  margin-bottom: 10px;
  width: 800px;
  /* border: 1px solid black; */
  background-color: rgb(176, 206, 231);

}

.box {
  height: 360px;
  overflow: auto;
}

.garden {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.btn {
  margin-left: 342px;
  width: 91px;
  height: 38px;
  border: none;
  border-radius: 10px 10px;
  background-color: red;
}
</style>
